import React from 'react'
import classNames from 'classnames'
import './index.scss';

export default (props) => {
  let { type, htmlType='text', value, placeholder='', onChange, onClick=()=>{}, className, ...another } = props;
  type = (type || '').split(' ');

  let classname = classNames(
    'input',
    className,
    type.filter(i => i).map(item => ('input-' + item)),
    { 'show-clear': value }
  );

  return (
    <div className={classname} >
      <input 
        type={htmlType} 
        value={value} 
        placeholder={placeholder} 
        onChange={e => {
          onChange(e.target.value);
        }} 
        onClick={onClick} 
        {...another} 
      />
      <div className="input-clear" onClick={() => onChange('')}></div>
    </div>
  );
}
